<template>
    <div class="image-editor">
        <Row :gutter="10">
            <Col span="22" offset="1">
            <Card class="slideList">
                <p slot="title" style="height: 34px">
                    <Icon type="ios-albums-outline"></Icon>
                    会员等级及权限设置(可编辑)
                    <Button type="success" @click="addLevelConfig">添加等级</Button>
                </p>
                <div class="edittable-table-height-con">
                    <Table :columns="slideTableHead" :data="levelConfigList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
                </div>
            </Card>
            </Col>
        </Row>
        <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
        <Modal v-model="levelConfigVatity" title="等级设置" @on-ok="handleSubmit('levelConfigModel')" @on-cancel="handleReset('levelConfigModel')">
            <Form :model="levelConfigModel" :label-width="80">
                <FormItem label="等级">
                    <InputNumber :max="100" :min="0" v-model="levelConfigModel.level" ></InputNumber>
                </FormItem>
                <FormItem label="经验">
                    <InputNumber :max="100000" :min="0" v-model="levelConfigModel.exp" ></InputNumber>
                </FormItem>
                <FormItem label="权限选择">
                    <CheckboxGroup v-model="levelConfigModel.checkedPersion">
                        <Checkbox v-for="item in persionList" :label="item" :key="item"></Checkbox>
                    </CheckboxGroup>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                //表头
                slideTableHead:[
                    {
                        title: '等级',
                        align: 'center',
                        key: 'level',
                        "sortable": true,
                    },
                    {
                        title: '经验',
                        align: 'center',
                        key: 'exp',
                    },

                    {
                        title:'踢人权限',
                        key:'isTiren',
                        align:'center',
                        width:'100px',
                        filters: [
                            {label: '无',value: 0},
                            {label: '有',value: 1}
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.isTiren === 0;
                            } else if (v === 1) {
                                return r.isTiren === 1;
                            }
                        },
                        render(h,column,index){
                            const row=column.row;
                            if(row.isTiren==1){
                                return h('Icon', {
                                    props: {
                                        type:"checkmark",
                                        color:'#009966'
                                    }
                                });

                            }else {
                                return h('Icon', {
                                    props: {
                                        type:"android-close",
                                        color:'#990000'
                                    }
                                });
                            }
                        }
                    },
                    {
                        title:'多彩字体权限',
                        key:'isColourful',
                        align:'center',
                        width:'160px',
                        filters: [
                            {label: '无',value: 0},
                            {label: '有',value: 1}
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.isColourful === 0;
                            } else if (v === 1) {
                                return r.isColourful === 1;
                            }
                        },
                        render(h,column,index){
                            const row=column.row;
                            if(row.isColourful==1){
                                return h('Icon', {
                                    props: {
                                        type:"checkmark",
                                        color:'#009966'
                                    }
                                });

                            }else {
                                return h('Icon', {
                                    props: {
                                        type:"android-close",
                                        color:'#990000'
                                    }
                                });
                            }
                        }
                    },
                    {
                        title:'推荐主播权限',
                        key:'isRecommend',
                        align:'center',
                        width:'160px',
                        filters: [
                            {label: '无',value: 0},
                            {label: '有',value: 1}
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.isRecommend === 0;
                            } else if (v === 1) {
                                return r.isRecommend === 1;
                            }
                        },
                        render(h,column,index){
                            const row=column.row;
                            if(row.isRecommend==1){
                                return h('Icon', {
                                    props: {
                                        type:"checkmark",
                                        color:'#009966'
                                    }
                                });

                            }else {
                                return h('Icon', {
                                    props: {
                                        type:"android-close",
                                        color:'#990000'
                                    }
                                });
                            }
                        }
                    },
                    {
                        title:'气泡背景权限',
                        key:'isChatBg',
                        align:'center',
                        width:'160px',
                        filters: [
                            {label: '无',value: 0},
                            {label: '有',value: 1}
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.isChatBg === 0;
                            } else if (v === 1) {
                                return r.isChatBg === 1;
                            }
                        },
                        render(h,column,index){
                            const row=column.row;
                            if(row.isChatBg==1){
                                return h('Icon', {
                                    props: {
                                        type:"checkmark",
                                        color:'#009966'
                                    }
                                });

                            }else {
                                return h('Icon', {
                                    props: {
                                        type:"android-close",
                                        color:'#990000'
                                    }
                                });
                            }
                        }
                    },
                    {
                        title:'进场提示权限',
                        key:'isLoginHint',
                        align:'center',
                        width:'160px',
                        filters: [
                            {label: '无',value: 0},
                            {label: '有',value: 1}
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.isLoginHint === 0;
                            } else if (v === 1) {
                                return r.isLoginHint === 1;
                            }
                        },
                        render(h,column,index){
                            const row=column.row;
                            if(row.isLoginHint==1){
                                return h('Icon', {
                                    props: {
                                        type:"checkmark",
                                        color:'#009966'
                                    }
                                });

                            }else {
                                return h('Icon', {
                                    props: {
                                        type:"android-close",
                                        color:'#990000'
                                    }
                                });
                            }
                        }
                    },
                    {
                        title:'隐藏入场权限',
                        key:'isHideLoginHint',
                        align:'center',
                        width:'160px',
                        filters: [
                            {label: '无',value: 0},
                            {label: '有',value: 1}
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.isHideLoginHint === 0;
                            } else if (v === 1) {
                                return r.isHideLoginHint === 1;
                            }
                        },
                        render(h,column,index){
                            const row=column.row;
                            if(row.isHideLoginHint==1){
                                return h('Icon', {
                                    props: {
                                        type:"checkmark",
                                        color:'#009966'
                                    }
                                });

                            }else {
                                return h('Icon', {
                                    props: {
                                        type:"android-close",
                                        color:'#990000'
                                    }
                                });
                            }
                        }
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        key: 'createTime',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 190,
                        align: 'center',
                        render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.upLevelConfig(params.index)
                                            }
                                        }
                                    }, '修改'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                this.deleteLevelConfig(params.index)
                                            }
                                        }
                                    }, '删除')
                                ]);
                        }
                    }
                ],
                selectURl:'/mlevelconfig/list',
                upOrAddURl:'/mlevelconfig/saveoredit',
                deleteURl:'/mlevelconfig/delete',
                tipeNews:'暂无数据',
                levelConfigList:[],
                levelConfigVatity:false,
                levelConfigModel:{},
                persionList: ['踢人权限', '多彩字体权限', '推荐主播权限', '气泡背景权限', '进场提示权限', '隐藏入场权限'],
                total:0,
                pageSize:0,
                page:1,

            }
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self=this;
                self.$axios.get(self.selectURl+'?curr='+self.page).then((res) => {
                    for (var i = 0;i<res.data.data.rows.length;i++){
                        let time =  new Date(parseInt(("/Date("+res.data.data.rows[i].createTime+")/").substr(6, 13))).toLocaleDateString();
                        res.data.data.rows[i].createTime = time;
                    }
                    self.levelConfigList = res.data.data.rows;
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            upLevelConfig(index){
                let self=this;
                var checkbox = [];
                if (self.levelConfigList[index].isTiren==1){
                    checkbox.push('踢人权限');
                }
                if (self.levelConfigList[index].isColourful==1){
                    checkbox.push('多彩字体权限');
                }
                if (self.levelConfigList[index].isRecommend==1){
                    checkbox.push('推荐主播权限');
                }
                if (self.levelConfigList[index].isChatBg==1){
                    checkbox.push('气泡背景权限');
                }
                if (self.levelConfigList[index].isLoginHint==1){
                    checkbox.push('进场提示权限');
                }
                if (self.levelConfigList[index].isHideLoginHint==1){
                    checkbox.push('隐藏入场权限');
                }
                self.levelConfigModel = self.levelConfigList[index];
                self.levelConfigModel.checkedPersion = checkbox;
                self.levelConfigVatity = true;

            },
            deleteLevelConfig(index){
                let self=this;
                let levelConfigModel = self.levelConfigList[index];
                self.$axios.post(self.deleteURl+'/'+levelConfigModel.id).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，此条设置删除成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，删除失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            addLevelConfig(){
                let self=this;
                self.levelConfigModel={};
                self.levelConfigVatity=true;
            },
            handleSubmit(name){
                let self=this;
                let a =self.levelConfigModel;
                let arry = [0,0,0,0,0,0];
                let title = ['踢人权限', '多彩字体权限', '推荐主播权限', '气泡背景权限', '进场提示权限', '隐藏入场权限'];
                for (var i = 0;i<6;i++){
                    for (var j = 0;j<a.checkedPersion.length;j++){
                        if (a.checkedPersion[j]==title[i]){
                            arry[i] =1;
                        }
                    }
                }
                self.levelConfigModel.isTiren= arry[0];
                self.levelConfigModel.isColourful= arry[1];
                self.levelConfigModel.isRecommend= arry[2];
                self.levelConfigModel.isChatBg= arry[3];
                self.levelConfigModel.isLoginHint= arry[4];
                self.levelConfigModel.isHideLoginHint= arry[5];
                self.$axios.post(self.upOrAddURl,self.levelConfigModel).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，此条设置删除成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，删除失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            handleReset(name){
                this.$refs[name].resetFields();
                this.levelConfigVatity=false;
            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            }
        }
    }
</script>